<template>
  <section class="core-value">
    <div class="container">
      <h3 class="section-title">核心价值</h3>
      <p class="section-desc">友福同享AI健康解决方案应用场景</p>

      <div class="diagram-wrapper" :style="{ backgroundImage: `url(${diagramBg})` }">
        <!-- 循环渲染所有模块 -->
        <div v-for="item in modules" :key="item.id" :class="['module', `module-${item.id}`]">
          <div
            class="module-content"
            :class="{
              hover: isHover === item.id,
              'hover-delay': isHover === item.id && isDelay[item.id]
            }"
            @mouseenter="handleMouseEnter(item.id)"
            @mouseleave="handleMouseLeave(item.id)"
          >
            <div class="icon">
              <img :src="item.icon" :alt="item.title" />
            </div>
            <div class="text">{{ item.title }}</div>
            <div
              v-if="isHover === item.id && isDelay[item.id]"
              class="desc"
              :class="{ show: isHover === item.id && isDelay[item.id] }"
            >
              {{ item.description }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 底图地址
const diagramBg = 'https://images.health.ufutx.com/202507/04/3b6a1b49d79c1cd13a59187e58c614a7.png'

// 模块数据（统一管理）
const modules = [
  {
    id: 1,
    title: 'AI赋能精准决策',
    description: '基于海量数据分析，提供精准的健康风险评估与干预建议。',
    icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
  },
  {
    id: 2,
    title: '创新七大核心要素更新人体全局系统',
    description: '自愈力、免疫力、抵抗力、平衡力、代谢力、情绪力及认知力。',
    icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
  },
  {
    id: 3,
    title: '全方位的AI健康管理系统',
    description: '精准营养方案+心理疏导陪伴+饮食方案+关键要素指导。',
    icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
  },
  {
    id: 4,
    title: '双重认证教练团队全程支持',
    description: '国家卫健委《营养指导员》+营养师协会《身心健康管理师》双证教练服务指导。',
    icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
  },
  {
    id: 5,
    title: '构建健康产业生态',
    description: '整合产业链协同，链接多方资源，打造开放共赢的智慧健康生态系统。',
    icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
  },
  {
    id: 6,
    title: '创新模式-身心双指标评估，生成精准个性化方案',
    description:
      '整合个人身理+心理健康数据、健康行为、个人及家族疾病史及生活方式等多维度数据，全方面分析精准个性化方案。',
    icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
  }
]

// 控制当前悬浮的模块（0为无悬浮）
const isHover = ref<number>(0)
// 控制每个模块的延迟状态
const isDelay = ref<Record<number, boolean>>({})
// 存储定时器ID，用于清除延迟
const delayTimer = ref<Record<number, NodeJS.Timeout>>({})

// 鼠标进入：触发hover状态+延迟布局
const handleMouseEnter = (moduleId: number) => {
  isHover.value = moduleId
  // 延迟0.4s触发布局变化（等尺寸动画结束）
  delayTimer.value[moduleId] = setTimeout(() => {
    isDelay.value[moduleId] = true
  }, 400)
}

// 鼠标离开：清除状态+定时器
const handleMouseLeave = (moduleId: number) => {
  isHover.value = 0
  clearTimeout(delayTimer.value[moduleId])
  isDelay.value[moduleId] = false
}
</script>

<style scoped lang="less">
.core-value {
  padding: 100px 0;
  background-color: #fff;

  .container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;

    .section-title {
      font-size: 32px;
      font-weight: bold;
      color: #333;
      margin-bottom: 20px;
    }

    .section-desc {
      font-size: 16px;
      color: #666;
      margin-bottom: 60px;
    }

    .diagram-wrapper {
      position: relative;
      width: 100%;
      height: 840px;
      overflow: hidden;
      border-radius: 12px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;

      // 通用模块样式
      .module {
        position: absolute;
        cursor: pointer;

        .module-content {
          display: flex;
          align-items: center;
          gap: 10px;
          background-color: rgba(255, 255, 255, 0.9);
          border: 1px solid #e5e7eb;
          border-radius: 50px;
          padding: 10px 16px;
          width: 190px;
          height: 70px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          transform-origin: center center;
          transition:
            height 0.2s ease,
            width 0.3s ease,
            transform 1s ease;

          /* 统一过渡时间和缓动函数 */
          //transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
          // 图标样式
          .icon {
            width: 50px;
            height: 50px;
            flex-shrink: 0;

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }

          // 文字样式（单行省略）
          .text {
            width: 130px;
            font-size: 18px;
            color: #333;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          // 描述文本
          .desc {
            width: 90%;
            opacity: 1;
            visibility: hidden;
            font-size: 14px;
            color: #666;
            line-height: 25px;
            text-align: center;

            &.show {
              opacity: 1;
              visibility: visible;
            }
          }

          // hover基础动画
          &.hover {
            width: 300px;
            height: auto;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            transform: translateX(-20%);
            .text {
              overflow: auto;
              text-overflow: ellipsis;
              white-space: pre-wrap;
              width: 100%;
            }
          }

          // 延迟布局样式
          &.hover-delay {
            display: grid;
            grid-template-rows: auto 1fr auto;
            align-items: start;
            justify-items: center;
            border-radius: 16px;
            background: #fff;
            padding: 20px;
          }
        }
      }

      // 各模块定位（与数据ID对应）
      .module-1 {
        bottom: 482px;
        left: 521px;
      }
      .module-2 {
        bottom: 482px;
        left: 1185px;
      }
      .module-3 {
        bottom: 240px;
        left: 376px;
      }
      .module-4 {
        bottom: 240px;
        left: 1328px;
      }
      .module-5 {
        bottom: 83px;
        left: 852px;
      }
      .module-6 {
        bottom: 381px;
        left: 842px;
      }
    }
  }
}

// 响应式适配
//@media (max-width: 768px) {
//  .core-value {
//    padding: 60px 0;
//
//    .container {
//      .section-title {
//        font-size: 28px;
//      }
//
//      .diagram-wrapper {
//        height: auto;
//        padding-bottom: 150%;
//
//        .module {
//          .module-content {
//            width: 150px;
//            height: 60px;
//
//            .icon {
//              width: 40px;
//              height: 40px;
//            }
//            .text {
//              font-size: 16px;
//            }
//
//            &.hover {
//              width: 250px;
//              height: auto;
//              transform: scale(1.05);
//            }
//          }
//        }
//      }
//    }
//  }
//}
</style>
